<template>
  <button
    class="new-button"
    @click.stop="handleClick"
    :title="props.tip"
    :style="{
      background: btnType === 'theme' ? 'var(--primary-reverse)' : 'var(--primary)',
    }">
    <i v-if="icon !== ''" :class="icon"></i>{{ props.text }}
  </button>
</template>

<script setup>
import { ref } from "vue"
const props = defineProps({
  btnType: {
    type: String,
    default: "",
  },
  icon: {
    type: String,
    default: "",
  },
  text: {
    type: String,
    default: "",
  },
  tip: {
    type: String,
    default: "",
  },
})
const emits = defineEmits(["clickIt"])
const isClick = ref(false)

function handleClick() {
  // 防误触, 0.2s一次
  if (!isClick.value) {
    isClick.value = true
    emits("clickIt")
    setTimeout(() => {
      isClick.value = false
    }, 200)
  }
}
</script>

<style scoped>
.new-button {
  color: var(--text);
  border: none;
  padding: 8px 20px;
  border-radius: var(--border-radius);
  font-size: 16px;
  cursor: pointer;
  transition: var(--transition);
  align-items: center;
  font-family: "DingTalkJinBuTi", "Kaiti", serif;
  gap: 8px;
  position: relative;
  overflow: hidden;
}

.new-button::before {
  content: "";
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: linear-gradient(45deg, transparent, rgba(255, 255, 255, 0.3), transparent);
  transform: rotate(45deg);
  transition: all 0.8s ease;
}

.new-button:hover::before {
  transform: rotate(45deg) translate(50%, 50%);
}

.new-button:hover {
  background: var(--primary-light);
  transform: translateY(-2px);
  box-shadow: var(--shadow);
}

.new-button:active {
  transform: scale(0.95);
}

@media (max-width: 480px) {
  .new-button {
    width: 100%;
    text-align: center;
  }
}
</style>
